<template>
  <div class="QRCode" :style="{ width: width, height: height }">
    <canvas
      :id="canvasId"
      ref="canvas"
      :style="{ width: width, height: height }"
    ></canvas>
  </div>
</template>
<script>
import QRCode from "qrcode";

export default {
  name: "QRCode",
  props: {
    content: {
      type: String,
      default: "测试二维码",
    },
    width: {
      type: String,
      default: "100",
    },
    height: {
      type: String,
      default: "100",
    },
    codeName: {
      type: String,
      default: "二维码",
    },
    load: {
      type: Boolean,
      default: true,
    },
    view: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      canvasId: "",
    };
  },
  computed: {},
  created() {
    this.canvasId = this.getUUID();
    this.$nextTick(() => {
      this.init();
    });
  },
  mounted: function () {},
  methods: {
    // handlePrintText() {
    //   this.$print(this.$refs.print)
    // },
    // // 打印二维码
    // getPrinting() {
    //   let employeeName = "溯源信息";
    //   let printContent = ''
    //   document.getElementById("qrcode").innerHTML = printContent;
    //   let new_str = document.getElementById("qrcode").innerHTML; //获取指定打印区域
    //   //构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
    //   document.body.innerHTML = new_str;
    //   for (let j = 0; j < 1; j++) {
    //     document.getElementById("XQ").innerHTML = ""; //置空
    //     new QRCode(document.getElementById("XQ"), {
    //       text: "dfjkdjdfjak123456789",
    //       width: 250,
    //       height: 250,
    //       colorDark: "#000000",
    //       colorLight: "#ffffff",
    //     });
    //   }
    //   window.print(); //打印刚才新建的网页
    //   window.location.reload();
    //   return false;
    // },
    saveCode() {
      //下载二维码
      console.log("二维码", this.$refs.canvas);
      let base64Img = this.$refs.canvas.toDataURL("image/jpg");
      //创建下载标签，然后设置链接和图片名称
      let a = document.createElement("a");
      a.href = base64Img;
      a.download = "二维码" + Date.now();
      a.click();
      //销毁元素
      a.remove();
    },
    init() {
      let width = this.width,
        height = this.height;
      QRCode.toCanvas(document.getElementById(this.canvasId), this.content, {
        width,
        height,
        toSJISFunc: QRCode.toSJIS,
      });
      console.log(this.content, "this.content,");
    },
    getUUID() {
      let d = new Date().getTime();
      let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          let r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
        }
      );
      return uuid;
    },
  },
  watch: {
    content() {
      this.init();
    },
  },
};
</script>
<style lang="scss" scoped>
.QRCode {
  display: inline-block;
  position: relative;
  overflow: hidden;

  .QQMode {
    position: absolute;
    left: 0;
    bottom: 100%;
    right: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.45);
    transition: all 200ms ease-in-out;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: bolder;
    box-sizing: border-box;
    padding: 10px;
  }
}

.QRCode:hover .QQMode {
  bottom: 0;
  height: 100%;
}
</style>
